<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 17. <数组&字符串练习>将类名数组转换为字符串 -->
    <script>
        const input = [
            'box',
            'container',
            'flex-box',
        ];
        const output = 'box container flex-box';

        // ⭐
        function classNames(input) {
            return input.join(' ');
        }
        console.log(classNames(input));



        // 18. < 数组 & 字符串 & 函数练习 > 封装函数输出正确的结果
        // function classNames1 (...input) {
        //     let str = '';
        //     for (const item of input) {
        //         if (item) {
        //             str = input.join(' ');
        //         }
        //     }
        //     return str;
        // }
        // console.log(classNames1('active', 'container', 'flex-box')); // 'active container flex-box'
        // console.log(classNames1(undefined, 'container', 'flex-box')); // 'container flex-box'
        // console.log(classNames1('', 'container', 'flex-box')); // 'container flex-box'

        // ⭐
        function classNames1 (...input) {
            return input.filter(item => !!item).join(' ');
        }
        console.log(classNames1('active', 'container', 'flex-box')); // 'active container flex-box'
        console.log(classNames1(undefined, 'container', 'flex-box')); // 'container flex-box'
        console.log(classNames1('', 'container', 'flex-box')); // 'container flex-box'
    </script>
</body>
</html>